<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div class="card-header">
            <span>总销售额</span>
          </div>
          <div class="card-body">
            <count-to
              :start-val="0"
              :end-val="totalSales"
              :duration="2600"
              :decimals="2"
              prefix="￥"
              class="total-amount"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-header">
            <span>订单总数</span>
          </div>
          <div class="card-body">
            <count-to
              :start-val="0"
              :end-val="totalOrders"
              :duration="2600"
              class="total-amount"/>
          </div>
        </el-card>
      </el-col>
      <!-- 其他统计卡片 -->
    </el-row>
    
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <div ref="salesChart" style="height:400px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div ref="orderChart" style="height:400px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import CountTo from 'vue-count-to'

export default {
  name: 'Dashboard',
  components: {
    CountTo
  },
  data() {
    return {
      totalSales: 126500,
      totalOrders: 1265,
      salesChart: null,
      orderChart: null
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.salesChart = echarts.init(this.$refs.salesChart)
      this.orderChart = echarts.init(this.$refs.orderChart)
      
      // 销售额趋势图配置
      const salesOption = {
        title: {
          text: '销售额趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      }
      
      // 订单量趋势图配置
      const orderOption = {
        title: {
          text: '订单量趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 132, 101, 134, 90, 230, 210],
          type: 'bar'
        }]
      }
      
      this.salesChart.setOption(salesOption)
      this.orderChart.setOption(orderOption)
    }
  },
  beforeDestroy() {
    if(this.salesChart) {
      this.salesChart.dispose()
    }
    if(this.orderChart) {
      this.orderChart.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .card-header {
    font-size: 16px;
    color: rgba(0,0,0,.45);
  }
  
  .total-amount {
    font-size: 24px;
    color: rgba(0,0,0,.85);
  }
  
  .chart-row {
    margin-top: 20px;
  }
}
</style> 